<template>
  <div>
    <el-row
      :gutter="20"
      v-permission="['getStatistics1,GET']"
    >
      <!-- 骨架屏  没有数据时才会显示-->
      <template v-if="panels.length == 0">
        <el-col
          :span="6"
          v-for="i in 4"
          :key="i"
        >
          <el-skeleton
            style="width: 100%"
            animated
            loading
          >
            <template #template>
              <el-card
                shadow="hover"
                class="border-0"
              >
                <template #header>
                  <div class="flex justify-between">
                    <el-skeleton-item
                      variant="text"
                      style="width: 50%"
                    />
                    <el-skeleton-item
                      variant="text"
                      style="width: 10%"
                    />
                  </div>
                </template>

                <el-skeleton-item
                  variant="h3"
                  style="width: 80%"
                />

                <el-divider />

                <div class="flex justify-between text-sm text-gray-500">
                  <el-skeleton-item
                    variant="text"
                    style="width: 50%"
                  />
                  <el-skeleton-item
                    variant="text"
                    style="width: 10%"
                  />
                </div>
              </el-card>
            </template>
          </el-skeleton>
        </el-col>
      </template>

      <!---真正要显示的数据-->
      <el-col
        :span="6"
        :offset="0"
        v-for="(item, index) in panels"
        :key="index"
      >
        <el-card
          shadow="hover"
          class="border-0"
        >
          <template #header>
            <div class="flex justify-between">
              <span class="text-sm">{{ item.title }}</span>
              <el-tag
                :type="item.unitColor == '' ? 'info' : item.unitColor"
                effect="plain"
              >
                {{ item.unit }}
              </el-tag>
            </div>
          </template>

          <span class="text-3xl font-bold text-gray-500">
            <CountTo :value="item.value" />
          </span>

          <el-divider />

          <div class="flex justify-between text-sm text-gray-500">
            <span>
              {{ item.subTitle }}
            </span>
            <span>
              {{ item.subValue }}
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--中间分类组件-->
    <IndexNavs />

    <!-- 订单统计和店铺及商品展示 -->
    <el-row
      :gutter="20"
      class="mt-4"
    >
      <!-- 订单统计 -->
      <el-col
        :span="12"
        :offset="0"
      >
        <IndexChart v-permission="['getStatistics3,GET']" />
      </el-col>
      <!-- 店铺及商品展示 -->
      <el-col
        :span="12"
        v-permission="['getStatistics2,GET']"
      >
        <IndexCard
          title="店铺及商品提示"
          tip="店铺及商品提示"
          :btns="goods"
          class="mb-4"
        />

        <IndexCard
          title="交易提示"
          tip="交易提示"
          :btns="order"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getStatistics1, getStatistics2 } from "~/api/index.js";

import CountTo from "~/components/CountTo.vue";
import IndexChart from "~/components/IndexChart.vue";
import IndexCard from "~/components/IndexCard.vue";

import { ref } from "vue";

import IndexNavs from "~/components/IndexNavs.vue";

const panels = ref([]);

getStatistics1().then((res) => {
  console.log("后台首页统计1:", res);
  panels.value = res.panels;
  console.log(panels.value);
});

const goods = ref([]);
const order = ref([]);
getStatistics2().then((res) => {
  console.log("后台首页统计2:", res);
  goods.value = res.goods;
  order.value = res.order;
});
</script>
